<template>
  <div class="singerSongsList">
    <!-- 歌曲列表 -->
    <div class="songsList" v-if="songsListInfo.length !== 0" ref="songsListRef">
      <div class="songsList_item title">
        <div class="songsList_item_index"></div>
        <div class="songsList_item_info">歌曲</div>
        <div class="songsList_item_author">作者</div>
        <div class="songsList_item_dt">时长</div>
      </div>
      <div
        class="songsList_item"
        v-for="(item, index) in songsListInfo"
        :key="item.id"
      >
        <div class="songsList_item_index">{{ index + 1 }}</div>
        <div class="songsList_item_info">
          <!-- <GlobalImageDeep
            :imgWidth="70"
            :imgHeight="70"
            :url="item.al.picUrl"
          /> -->
          <p @click="toSongDetailsPage(item.id)">{{ item.name }}</p>
          <div class="songsList_item_info_bt">
            <div>
              <i
                class="iconfont icon-bofang"
                @click="toPlayerPage(item.id)"
              ></i>
            </div>
            <div>
              <i class="iconfont icon-tianjiawenjian"></i>
            </div>
          </div>
        </div>
        <div class="songsList_item_author one_txt_cut">
          <!-- {{ formatName(item.ar) }} -->
          <span
            v-for="itemm in item.ar"
            :key="itemm.id"
            @click="toSingerDetailsPage(itemm.id)"
            >{{ itemm.name }}</span
          >
        </div>
        <div class="songsList_item_dt">{{ formatMS(item.dt) }}</div>
      </div>
    </div>

    <!-- 分页 -->
    <el-row
      type="flex"
      class="row-bg"
      justify="center"
      v-if="songsListInfo.length !== 0"
    >
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="paginationCurrentChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getSingerAllSongs } from "../../../../../api/singerDetailsApi";
import moment from "moment";
// 歌曲列表渲染的地方
export default {
  name: "singerSongsList",
  components: {},
  props: {
    id: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      songsListInfo: [],
      queryInfo: {
        id: 0,
        limit: 10,
        offset: 0,
      },
      currentPage: 1,
      total: 0,
    };
  },
  created() {
    // console.log(songsList);
    this.queryInfo.id = this.id;
    this.getSingerAllSongsMthods();
  },
  methods: {
    toPlayerPage(id) {
      // 没用打开 player 窗口
      let link = this.$router.resolve({
        path: `/player/${id}`, //要跳转的路由
      });
      window.open(link.href, "player"); //打开新窗口
      // sessionStorage.setItem("open", true);
    },
    // 获取第一页的
    async getSingerAllSongsMthods() {
      let result = await getSingerAllSongs(this.queryInfo);
      if (result.code === 200) {
        this.songsListInfo = result.songs;
        this.total = result.total;
        // console.log(this.$refs.songsListRef);
        // console.log(this.songsListInfo);
      }
    },
    // 分页的页码值改变的时候
    paginationCurrentChange(newPage) {
      // console.log(newPage);
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit;

      // this.queryInfo.offset = newPage - 1;
      this.currentPage = newPage;
      this.getSingerAllSongsMthods();
      // 返回到顶部
      // this.$utils.scrollTop(this.$refs.songsListRef.offsetTop, 200);
      this.$utils.scrollTop(
        document.querySelector(".songsList").offsetTop,
        200
      );
    },

    // 格式化时间
    formatDate(time) {
      return moment(time).format("MM月DD日");
    },
    formatMS(dt) {
      return moment(dt).format("mm:ss");
    },
    formatName(names) {
      let str = "";
      names.forEach((item) => {
        str = str + item.name + "/";
      });
      str = str.slice(0, str.length - 1);
      return str;
    },
    toSongDetailsPage(id) {
      this.$router.push(`/songDetails/${id}`);
    },
    toSingerDetailsPage(id) {
      this.$router.push(`/singerDetails/${id}`);
    },
  },
  watch: {
    id: {
      // deep: true,
      handler(newValue) {
        // console.log("获取到的最新的id", newValue);
        this.queryInfo.id = newValue;
        this.queryInfo.offset = 0;
        this.currentPage = 1;
        this.getSingerAllSongsMthods();
      },
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.singerSongsList {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }

  // width: 900px;
  // height: 700px;
  overflow-y: auto;
  margin-right: 20px;
  // background-color: red;
  // 歌曲列表
  .songsList {
    padding: 20px 0;
    font-size: 14px;
    .title {
      color: #999;
      height: 50px !important;
    }
    .songsList_item {
      display: flex;
      align-items: center;
      height: 80px;
      // background-color: red;
      &:hover {
        .songsList_item_info_bt {
          opacity: 1 !important;
        }
      }
      .songsList_item_index {
        width: 40px;
        text-align: center;
      }
      .songsList_item_author {
        width: 200px;
        padding-right: 20px;
        // background-color: green;
        // &:hover {
        //   color: @globalColor;
        //   cursor: pointer;
        // }
        span {
          margin-right: 6px;
          &:hover {
            cursor: pointer;
            color: @globalColor;
          }
        }
      }
      .songsList_item_dt {
        width: 50px;
        // background-color: #fff;
      }
      .songsList_item_info {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;
        padding-right: 20px;
        p {
          margin-left: 10px;
          &:hover {
            color: @globalColor;
            cursor: pointer;
          }
        }
        /deep/ .el-image img {
          border-radius: 8px;
        }
        .songsList_item_info_bt {
          display: flex;
          opacity: 0;
          position: absolute;
          right: 20px;
          > div {
            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #999999;
            &:hover {
              border: 1px solid @globalColor;
              color: @globalColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>

